<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script> -->
    <script src="https://unpkg.com/echarts@5.3.1/dist/echarts.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            margin: 20px 18px 14px 20px;
            background: #f3e5cf;
            --color-black: #333333;
            --color-theme: #8f6320;
            --color-gray: #adadad;
            color: var(--color-black);
        }

        p {
            letter-spacing: 1px;
        }

        .text-16-t {
            color: var(--color-theme);
            font-size: 16px;
            height: 16px;
            line-height: 16px;
            font-weight: 700;
        }

        .text-14-b {
            color: var(--color-black);
            font-size: 14px;
            height: 14px;
            line-height: 14px;
            font-weight: 700;
        }

        .text-14-g {
            color: var(--color-gray);
            font-size: 14px;
            height: 14px;
            line-height: 14px;
        }

        .name {
            display: flex;
            justify-content: space-between;
        }

        .p-title {
            margin: 20px 0 14px 0;
        }

        .chart {
            height: 280px;
            width: 100%;
            position: absolute;
            top: 0;
        }

        .card {

            background: #fff;
            border-radius: 10px;
            position: relative;
            margin: 20px 0;
        }

        .card-title {
            display: flex;
            padding-top: 20px;
        }

        .card-title div:nth-child(1) {
            width: 3px;
            height: 14px;
            background: #d3b68b;
            border-radius: 4px;
            margin-right: 10px;
        }

        .statistics {
            position: absolute;
            bottom: 20px;
            margin: 0 20px;
            display: grid;
            grid-template-columns: auto auto;
            justify-content: space-between;
            width: calc(100% - 36px);
        }

        .statistics p {
            color: var(--color-gray);
            font-size: 12px;
            line-height: 22px;
        }

        .statistics span {
            font-size: 18px;
            color: var(--color-theme);
        }
        .chars {
            line-height: 28px;
            margin-bottom: 12px;
            color: var(--color-theme);
            display: flex;
            flex-wrap:wrap;
        }
        .chars-tag {
            display: flex;
            
        }
        .chars-tag p {
            height: auto;
            white-space: nowrap;
        }
        .gacha-msg {
            margin: 0 20px;
            padding-bottom: 20px;
        }
        .gacha-msg p {
            line-height: 18px;
            font-size: 12px;
            color: var(--color-gray);
        }
        .gacha-msg span {
            font-size: 16px;
            color: var(--color-theme);
        }
        .new {
            color: red;
            font-size: 10px;
            top: 0;
            right: 0;
            transform: scale(0.83);
            line-height: 8px;
        }
        .power {
            width: 100%;
        }
        .power p {
            font-size: 12px;
            text-align: center;
            color: var(--color-gray);
        }
    </style>
</head>

<body>
    <div class="name" id="user-info"></div>
    <div class="card" style="height: 320px;width: 100%;">
        <div class="card-title">
            <div></div>
            <p class="text-14-b">出货比例</p>
        </div>
        <div id="chart-char" class="chart"></div>
        <div class="statistics" id="statistics"></div>
    </div>

    <div class="card" style="width: 100%;">
        <div class="card-title">
            <div></div>
            <p class="text-14-b">卡池比例</p>
        </div>
        <div id="chart-gacha" class="chart"></div>
        <div style="height: 180px;"></div>
        <div class="gacha-msg" id="gacha-msg">
            <!-- <p><span>斩荆辟路</span>共<span>80</span>抽，累计<span>23</span>抽未出6星</p> -->
        </div>
    </div>

    <div class="card" style="height: auto;width: 100%;">
        <div class="card-title">
            <div></div>
            <p class="text-14-b">统计</p>
        </div>
        <div style="margin: 18px 20px 0 20px;">
            <p class="text-14-g">六星出货记录：</p>
            <div class="chars" id="chars6"></div>
            <p class="text-14-g">五星出货记录：</p>
            <div class="chars" id="chars5">
                <!-- <div class="chars-tag"><p>德克萨斯</p><div class="new">new</div><p>、</p></div>-->
            </div>
        </div>
        <div style="height: 20px;"></div>
    </div>
    <div class="power">
        <p>author @memanie</p>
    </div>
    <script>
        let colors = ["#d87c7c", "#919e8b", "#d7ab82", "#6e7074", "#61a0a8", "#efa18d", "#787464", "#cc7e63", "#724e58", "#4b565b"]
        let chart_char = echarts.init(document.getElementById('chart-char'));
        let chart_gacha = echarts.init(document.getElementById('chart-gacha'));
        option = {
            animation: false,
            color: colors,
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '出货比例',
                    type: 'pie',
                    radius: '50%',
                    data: [],
                    label: {
                        formatter: '{b}',
                        color: '#adadad'
                    },
                    center: ['50%', '45%'],
                }
            ],
        };
        chart_char.setOption(option);
        chart_gacha.setOption(option);
    </script>
</body>

</html>